<template>
    <div>
        <slot></slot>
        <custom-table
            :scroll="{ x: '1800', y: 350 }"
            ref="ruleTableRef"
            :rules="tableRules"
            class="margin-t-16 release-version-table"
            size="small"
            rowKey="uuid"
            :pagination="false"
            :columns="columns"
            :data-source="newList"
        >
            <template #requireTitle="{ record }">
                <span>{{ record.requireTitle }}</span>
            </template>
            <template #versionNumber="{ record }">
                {{ record.versionNumber }}
            </template>
            <template #jiraId="{ record }">
                {{ record.jiraId ? 'JIRA' : '' }}
            </template>
            <template #planRequires="{ record }">
                <flexbox>
                    <span v-if="record.planRequires || record.planRequires == 0">{{ record.planRequires }}</span>
                </flexbox>
            </template>
            <template #onlineRequires="{ record }">
                <flexbox>
                    <span v-if="record.onlineRequires || record.onlineRequires == 0">{{ record.onlineRequires }}</span>
                </flexbox>
            </template>
            <template #comPercent="{ record }">
                {{ record.planRequires ? ~~((record.onlineRequires / record.planRequires) * 100) + '%' : 0 }}
            </template>
            <template #planOnlineTime="{ record }">
                <flexbox>
                    <span v-if="record.planOnlineTime">{{ $filters.dateFilter(record.planOnlineTime) }}</span>
                </flexbox>
            </template>
            <template #realOnlineTime="{ record }">
                <flexbox>
                    <flexbox>
                        <span v-if="record.realOnlineTime">{{ $filters.dateFilter(record.realOnlineTime) }}</span>
                    </flexbox>
                </flexbox>
            </template>
            <template #onlineStatus="{ record }">
                <a-tag color="red" v-if="record.onlineStatus === '2'">延期</a-tag>
                <a-tag color="blue" v-if="record.onlineStatus === '1'">正常</a-tag>
            </template>
        </custom-table>
    </div>
</template>

<script lang="tsx">
import uuid from 'node-uuid';
import { useRouter } from 'vue-router';
import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';
import { detailColumns } from '@/views/energyManage/analysisReport/config/detailColumns';
import { CustomTable, HDatePickerCell } from '@/components';
import { defineComponent, ref, unref, reactive, toRefs, computed, watch } from 'vue';
export default defineComponent({
    components: {
        CustomTable,
        HDatePickerCell,
        PlusCircleOutlined,
        MinusCircleOutlined
    },
    props: {
        list: {
            type: Array,
            default: () => []
        },
        detail: {
            type: Object,
            default: () => ({})
        },
        hasAuth: {
            type: Boolean,
            default: false
        },
        isNoData: {
            type: Boolean,
            default: false
        }
    },
    emits:['success'],
    setup(props) {
        const { columnsG} = detailColumns;
        const router = useRouter();
        const ruleTableRef = ref<any>();
        // 表格规则
        const tableRules = {
            requireTitle: [{ required: true, message: '版本概述不能为空' }]
        };
        const state = reactive<any>({
            newList: [],
            locale: { emptyText: () => <a-empty description="未填报" /> }
        });
        const disabled = computed(() => {
            return +props.detail.stage > 2 || !props.hasAuth || props.isNoData;
        });
        const columns = computed(() => {
            columnsG[columnsG.length - 1].width = 120;
            return [
                ...columnsG
            ];
        });
        const validate = async () => {
            return true;
        };
        
        const jumpTo = (type, ids) => {
            router.push({
                path: '/energyManage/analysisReport/proList',
                query: {
                    ids,
                    type,
                    systemName: props.detail.systemName
                }
            });
        };
        watch(
            () => props.list,
            (n) => {
                state.newList = [...n].map((item:any) => ({
                    ...item,
                    uuid:uuid.v4()
                }));
            },
            {
                immediate: true
            }
        );
        return {
            columns,
            ruleTableRef,
            tableRules,
            disabled,
            ...toRefs(state),
            jumpTo,
            validate
        };
    }
});
</script>

<style scoped>
</style>